<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Friend Networks</title>
    <style>

@import url(../style.css);
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .8;
}
        svg {
            position: absolute;
            left: 0px;
        }
        .leftheading {
            position: relative;
            left: 0px;
            width: 300px;
            float: left;
            font-size: 20px;
        }
        .rightheading {
            position: relative;
            left: 20px;
            width: 150px;
            float: left;
            font-size: 20px;
        }
        #leftButton {
            position: relative;
            left: 0px;
            top: 0px;
            min-width: 70px;
        }
        #rightButton {
            position: relative;
            left: 300px;
            top: 0px;
            min-width: 70px;
        }

.logo {
    position: absolute;
    left: 200px;
    top: 260px;
    font-size: 16px;
    opacity: 0.5;
}

</style>
</head>
<body>
    <a href="../index.html">cola.js home</a>
    <!--<h1>Friend Networks</h1>-->
        <div class="leftheading">Acquaintances</div>
        <div class="rightheading">Close Friends</div>
    <p />
<script src="../extern/d3v4.js"></script>
    <script src="../cola.min.js"></script>
<script>
    var width = 280,
        height = 280;

    var color = d3.scaleOrdinal(d3.schemeCategory20);
    var leftvisible = true;
    document.onkeyup = keyhandler;
    var visible = false;
    function keyhandler(e) {
        if (e.keyCode === 65 && visible) {
            showhideleft();
        }
        if (e.keyCode === 76 && visible) {
            showhideright();
        }
        if (e.keyCode === 32 && !visible) {
            go();
            visible = true;
        }
    }
    function showhideleft() {
        if (leftvisible) {
            egosvg1.svg.transition().duration(1000).attr("opacity", 0);
            leftvisible = false;
            //leftbutton.text("show");
        } else {
            egosvg1.svg.transition().duration(1000).attr("opacity", 1);
            leftvisible = true;
            //leftbutton.text("hide");
        }
    }
    var rightvisible = true;
    function showhideright() {
        if (rightvisible) {
            egosvg2.svg.transition().duration(1000).attr("opacity", 0);
            rightvisible = false;
            rightbutton.text("show");
        } else {
            egosvg2.svg.transition().duration(1000).attr("opacity", 1);
            rightvisible = true;
            rightbutton.text("hide");
        }
    }

    var body = d3.select("body");
    //var leftbutton = body.append("button").attr("id", "leftButton").html("hide").on("click", showhideleft);
    //var rightbutton = body.append("button").attr("id", "rightButton").html("hide").on("click", showhideright);
    //body.append("br");

    var egosvg = (function () {
        function egosvg(file, edgelength, gender) {
            this.edgelength = edgelength;
            this.gender = gender;
            this.d3cola = cola.d3adaptor(d3).convergenceThreshold(1e-4)
                .size([width, height]);

            this.svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            this.edgegroup = this.svg.append("g");
            this.nodegroup = this.svg.append("g");

            this.edges = [];

            var _this = this;

            d3.text(file,
                function (error, text) {
                    var lines = text.split('\n').map(function (s) { return s.trim() });
                    lines.forEach(function (l, i) {
                        if (l.length > 0) {
                            l.split(' ').forEach(function (d, j) {
                                if (Number(d) > 0 && i > j) {
                                    _this.edges.push({ source: i, target: j });
                                }
                            });
                        }
                    });
                    _this.loaded();
                });
        }

        var regularTick = function (link, node) {
            link.attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });

            node.attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; });
        };

        egosvg.prototype.loaded = function () {
            var _this = this;
            this.d3cola
                .links(this.edges)
                .symmetricDiffLinkLengths(this.edgelength)
                .start(30);

            var nodes = this.d3cola.nodes();
            nodes.forEach(function (v) { v.width = 20; v.height = 20; });

            this.link = this.edgegroup.selectAll(".link")
                .data(this.d3cola.links(), function (d) {
                    return _this.d3cola.linkId(d);
                });

            this.link.enter().append("line")
                .attr("class", "link")
                .style("stroke-width", function (d) { return Math.sqrt(d.value); });


            this.node = this.nodegroup.selectAll(".node")
                .data(nodes)
              .enter().append("circle")
                .attr("class", "node")
                .attr("r", function (d, i) { return 5 })
                .style("fill", function (d, i) { return _this.gender[i] < 2 ? "#8e8ec7" : "#da5d2d" })
                .call(this.d3cola.drag);

            this.node.append("title")
                .text(function (d) { return d.index; });

            this.d3cola.on("tick", function () { regularTick(_this.link, _this.node) });
            allDone();
        };
        return egosvg;
    })();
    var egosvg1, egosvg2;

    function go() {
        d3.text("graphdata/alex/Full_Network_Sym/gender.txt",
            function (error, text) {
                var gender = text.split('\n').map(function (s) { return Number(s.trim()) });
                egosvg1 = new egosvg("graphdata/alex/Full_Network_Sym/acquaint_core.txt", 25, gender);
                egosvg2 = new egosvg("graphdata/alex/Full_Network_Sym/closef_core.txt", 6, gender);
                egosvg2.svg.style("left", "300px");
            });
    }

    var counter = 0;
    function allDone() {
        if (++counter === 2)
            body.append("p").html('<p class="logo">marvl.infotech.monash.edu</p>');
            //body.append("p").html('<div class="logo"><img src="http://marvl.infotech.monash.edu.au/wp-content/themes/marvl/marvl.png" width="85px" alt="MArVL Logo" />  Monash Adaptive Visualization Lab</div>');
    }
</script>
<!--<p>This is the friend network of a particular person (the red node).  Since by definition there is a link from the red node to all the blue nodes (their friends),
    there's really no point showing all those links.  Therefore, pressing the button removes those links and rearranges the network to tidy it up.-->
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-63535113-1', 'auto');
  ga('send', 'pageview');

    </script>
</body>
</html>
